<template>
    <div class="flex items-center justify-start">
        <el-icon v-if="modelValue" size="20px" class="mr-2">
            <component :is="modelValue" />
        </el-icon>
        <el-select :model-value="modelValue" :placeholder="placeholder || '请选择图标'" @change="onChange"
            style="width: 100px;">
            <el-option v-for="(item, index) in icons" :key="index" :label="item" :value="item">
                <div class="flex items-center justify-start">
                    <el-icon size="16px">
                        <component :is="item" />
                    </el-icon>
                    <span class=" text-gray-500 text-xs ml-1">{{ item }}</span>
                </div>
            </el-option>
        </el-select>
    </div>

</template>
<script setup>
import { ref } from 'vue'
import * as iconList from '@element-plus/icons-vue'
// 定义接收的 props
const props = defineProps({
    modelValue: {
        type: String,
        default: ''
    },
    placeholder: {
        type: String,
        default: '请选择头像'
    }
});
const icons = ref(Object.keys(iconList))

// 定义触发的事件
const emit = defineEmits(['update:modelValue'])

const onChange = (icon) => {
    emit('update:modelValue', icon)
}

</script>